<template>
	<view class="uni-tab-bar">
		<scroll-view id="tab-bar" class="uni-swiper-tab" :scroll-x="true" :show-scrollbar="false" :style="scrollStyle">
			<block v-for="(tab,index) in tabBars" :key="tab.id">
				<view class="swiper-tab-list" @tap="taptap(index)" :class="{'active':tabIndex==index}" :style="scrollItemStyle">
					<text>{{tab.name}}</text>
					<view class="swiper-tap-line"></view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			tabBars:Array,
			tabIndex:Number,
			scrollStyle:{
				type:String,
				default:""
			},
			scrollItemStyle:{
				type:String,
				default:""
			}
		},
		methods:{
			taptap(index) {
				//this.tabIndex = index;
				//子组件中自定义的tabChange时间，父组件对改事件进行监听
				this.$emit("tabChange",index);
			}
		}
	}
</script>

<style>
	.uni-tab-bar {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}
	
	.active text {
		color: #333333!important;
		font-weight: bolder;
	}
	
	.swiper-tab-list text {
		color: #969696;
		font-weight: bold;
	}
	
	.active .swiper-tap-line {
		width: 70rpx;
		border-top: 6rpx solid #FEDE33;
		border-bottom: 6rpx solid #FEDE33;
		margin: -37rpx auto;
		border-radius: 15%;
	}
	
	.swiper-box {
		flex: 1;
		/* height: 2600rpx !important; */
	}
</style>
